<template>
  <div id="app">
    <el-config-provider :locale="elementLocale">
      <router-view />
      <div v-if="isLoading" class="global-loading">
        <el-icon class="loading-icon"><Loading /></el-icon>
        <span class="loading-text">加载中...</span>
      </div>
    </el-config-provider>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, provide } from 'vue'
import { useI18n } from 'vue-i18n'
import { Loading } from '@element-plus/icons-vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { markRouteVerified } from '@/utils/navigation'

const { locale } = useI18n()
const elementLocale = ref(zhCn)
const isLoading = ref(false)
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 提供全局加载状态控制函数，供其他组件使用
const setLoading = (status) => {
  isLoading.value = status
}

provide('setLoading', setLoading)

// 监听全局路由变化
router.beforeEach((to, from, next) => {
  // 导航开始时显示加载状态
  setLoading(true)
  
  // 如果用户已登录但尝试访问登录页，则重定向到主页
  if (to.path === '/' && userStore.isAuthenticated) {
    next('/main/screening')
    return
  }
  
  next()
})

router.afterEach((to) => {
  // 导航完成后隐藏加载状态，延迟300ms确保页面有时间渲染
  setTimeout(() => {
    setLoading(false)
  }, 300)
  
  // 确保所有main子路由都被标记为已验证，特别是screening页面
  if (to.meta.requiresAuth) {
    if (to.path.startsWith('/main/')) {
      markRouteVerified(to.path)
    }
    // 特别确保screening页面为已验证状态
    if (to.path === '/main/screening') {
      markRouteVerified('/main/screening')
    }
  }
})

watch(() => locale.value, (val) => {
  elementLocale.value = val === 'zh-CN' ? zhCn : en
})

// 监听用户认证状态变化
watch(() => userStore.isAuthenticated, (isAuth, prevIsAuth) => {
  // 当用户从未认证变为已认证时，确保不在登录页
  if (isAuth && !prevIsAuth && route.path === '/') {
    router.replace('/main/screening')
  }
})

onMounted(() => {
  // 首次加载时短暂显示加载状态
  isLoading.value = true
  setTimeout(() => {
    isLoading.value = false
    
    // 确保当前路由已标记为已验证
    if (route.meta.requiresAuth) {
      markRouteVerified(route.path)
    }
    
    // 在初始化时检查，如果用户已认证但在登录页则重定向
    if (userStore.isAuthenticated && route.path === '/') {
      router.replace('/main/screening')
    }
  }, 500)
})
</script>

<style>
:root {
  --el-color-primary: #00c6fb;
  --darker-bg: #d7dde9;
  --dark-bg: #12151c;
  --card-bg: rgba(255, 255, 255, 0.05);
  --border-color: rgba(255, 255, 255, 0.1);
  --text-light: #ffffff;
  --neon-blue: #00c6fb;
  --glow-shadow: 0 0 20px rgba(0, 198, 251, 0.1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  min-height: 100vh;
  background: var(--darker-bg);
  color: var(--text-light);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  overflow-x: hidden;
}

#app {
  width: 100%;
  min-height: 100vh;
}

.el-button {
  border-radius: 4px;
}

.el-button--primary {
  background: linear-gradient(45deg, #00c6fb, #005bea);
  border: none;
}

.el-button--primary:hover {
  background: linear-gradient(45deg, #00b2e1, #004ed6);
  transform: translateY(-2px);
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--darker-bg);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.global-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  
  .loading-icon {
    font-size: 48px;
    color: var(--el-color-primary);
    animation: rotate 1s linear infinite;
    margin-bottom: 16px;
  }
  
  .loading-text {
    font-size: 16px;
    color: #606266;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
